const navs = document.querySelectorAll('.nav div')
const is = document.querySelectorAll('.nav i')
const sousuo= document.querySelector('.sousuo')
const goods = document.querySelector('.goods')
const goodslist= document.querySelector('.goodslist')
// 获取上一页的goodsName
let lgs = window.location.search;
let idVal = +decodeURI(lgs.substr(lgs.indexOf("=") + 1, lgs.length - lgs.indexOf("="))); //从=号后面的内容
let goodsName = decodeURI(lgs.substr(lgs.indexOf("=") + 1, lgs.length - lgs.indexOf("=")));
console.log(goodsName)
if (goodsName !== '') {
  sousuo.placeholder = goodsName
  render()
}
// 点击搜索框
sousuo.addEventListener('focus',function () {
  location.href='./sousuo.html'
})
// 后退效果
document.querySelector('.icon-jiantou4').addEventListener('click',function () {
  history.back()
})
//渲染数据
async function render() {
  const res = await axios.get("http://cba.itlike.com/public/index.php?s=/api/goods/list", { params: { goodsName: goodsName }, })
  console.log(res.data.data.list.data)
  let str = ''
  let str1=''
  res.data.data.list.data.forEach((item) => {
    let line_price_maxs = item.line_price_max== 0.00?'':'￥'+item.line_price_max
    str+=`<a href="shangpin.html?goodsId=${item.goods_id}">
    <div class="item">
      <div class="item_left" >
        <img src=${item.goods_image} alt="" />
      </div>
      <div class="item_right" >
        <span class="spa">${item.goods_name}</span>
        <p class="spb" >已售${item.goods_sales}件</p>
        <p class="spc" >
          <span class="spca" ><i>￥</i>${item.goods_price_max}</span>
          <del>${line_price_maxs}</del>
        </p>
      </div>
    </div>
  </a>`
  })
  goods.innerHTML = str
  res.data.data.list.data.forEach((item) => {
    let line_price_maxs = item.line_price_max== 0.00?'':'￥'+item.line_price_max
    str1+=`<a href="shangpin.html?goodsId=${item.goods_id}">
    <div class="item">
      <div class="item_top">
        <img  src=${item.goods_image} alt=""/>
      </div>
      <div class="item_bottom">
        <span class="spa">${item.goods_name}</span>
        <p class="spc">
          <span class="spca"><i>￥</i> ${item.goods_price_max}</span>
          <del>${line_price_maxs}</del>
        </p>
      </div>
    </div>
  </a>`
  })
  goodslist.innerHTML = str1
 }
// axios.get("http://cba.itlike.com/public/index.php?s=/api/goods/list").then((res) => { 
// console.log(res)
// })

// 导航栏点击事件
navs.forEach((ele,i) => { 
  document.querySelector('.nav').addEventListener('click', function (e) {
    if (e.target.tagName === 'DIV'||e.target.tagName === 'I') { 
      const active= document.querySelector('.active')
      if (active) {
        is.forEach((ele, i) => { 
          is[i].classList.remove('active')
        })
        navs[i].classList.remove('active')
      }
      e.target.classList.add('active')
      if (e.target.tagName === 'I') {
        if (active) {
          is.forEach((ele, i) => { 
            is[i].classList.remove('active')
          })
        }
        e.target.classList.add('active')
        document.querySelector('.nav_c').classList.add('active')
      }
    }
  })
})

// 字体图标点击转换内容格式事件
document.querySelector('.ziti').addEventListener('click',function () {
  if (document.querySelector('.icon-yingyongzhongxin')) { 
    this.className = 'iconfont ziti icon-yingyong'
    goodslist.style.display = 'flex'
    goods.style.display='none'
  } else {
    this.className = 'iconfont ziti icon-yingyongzhongxin'
    goods.style.display = 'block'
    goodslist.style.display = 'none'
  }
})